<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        <!--Tabs 标签页-->
        <el-tabs>
          <el-tab-pane label="角色管理" />
        </el-tabs>
        <!--按钮-->
        <template>
          <el-button type="primary" @click.native="doAdd">+ 新增角色</el-button>
        </template>
        <!--table表单-->
        <el-table
          stripe
          style="width: 80%"
          :data="list"
        >
          <el-table-column
            type="index"
            label="序号"
            :index="indexMethod"
          />
          <el-table-column
            prop="name"
            label="角色名称"
          />
          <el-table-column
            prop="description"
            label="角色描述"
          />
          <el-table-column
            label="操作"
          >
            <template v-slot="scope">
              <el-button type="success" @click="hAssign">分配权限</el-button>
              <el-button type="primary" @click.native="editRules(scope.row)">编辑</el-button>
              <el-button type="danger" @click.native="deleteRoule(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          :current-page.sync="formData.page"
          :page-sizes="[2,4, 6, 8, 10]"
          :page-size="formData.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
      <!--对话框-->
      <el-dialog
        :title="isEdit? '编辑角色':'添加角色'"
        :visible.sync="showDialog"
        width="50%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="hClose"
      >
        <el-form
          ref="rulerformDataRef"
          label-position="left"
          label-width="80px"
          :model="rulerformData"
          :rules="rulerformDataRules"
        >
          <el-form-item label="角色名称" prop="name">
            <el-input
              v-model="rulerformData.name"
              placeholder="请输入角色名称"
            />
          </el-form-item>
          <el-form-item label="角色描述" prop="description">
            <el-input
              v-model="rulerformData.description"
              placeholder="请输入角色描述"
            />
          </el-form-item>
          <el-form-item>
            <template>
              <el-button type="info" @click.native="hClose">取消</el-button>
              <el-button type="primary" @click.native="hSubmit">确定</el-button>
            </template>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--分配权限对话框-->
      <el-dialog
        title="分配权限(⼀级为路由⻚⾯查看权限-⼆级为按钮操作权限)"
        :visible.sync="showDialogAssign"
        width="50%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <assign-permission />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getRoule, delRoule, adddRoule, updateRoule } from '@/api/settings'
import assignPermission from './assignPermission'
export default {
  components: { assignPermission },
  // 数据
  data() {
    return {
      showDialogAssign: false, // 分配权限对话框
      formData: { // 分页对象
        page: 1,
        pagesize: 2
      },
      total: 0, // 总页码
      list: [],
      showDialog: false, // 对话框布尔值
      rulerformData: { // 表单数据对象
        name: '',
        description: ''
      },
      isEdit: false, // 添加,还是编辑
      // 配置表单检验规则
      rulerformDataRules: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
          { min: 2, max: 50, message: '输入的长度为2-50个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '角色描述不能为空', trigger: 'blur' },
          { min: 2, max: 100, message: '输入的长度为2-100个字符', trigger: 'blur' }
        ]
      }
    }
  },
  // 钩子created
  created() {
    // 获取所有角色列表
    this.loadRoule()
  },
  // 方法
  methods: {
    // --------------------点击分配权限对话框
    hAssign() {
      // 打开对话框
      this.showDialogAssign = true
    },
    // --------封装获取所有角色列表函数
    async loadRoule() {
      const res = await getRoule(this.formData)
      console.log(res)
      if (res.code === 10000) {
        // 成功,显示信息
        this.$message.success(res.message)
        // 将数据绑定到data中
        this.list = res.data.rows
        this.total = res.data.total
      }
    },
    // ----------点击确认按钮
    hSubmit() {
      // 兜底检验
      this.$refs.rulerformDataRef.validate(valid => {
        // 如果检验通过
        if (valid) {
          if (this.isEdit) {
            // 编辑功能
            this.doEdit()
          } else {
            // 添加功能
            this.addRoule()
          }
        }
      })
    },
    // --------点击编辑按钮
    editRules(row) {
      // 打对话框
      this.showDialog = true
      // 确认是编辑功能
      this.isEdit = true
      // 数据回填
      this.rulerformData = { ...row }
    },
    // 封装编辑功能,发送ajax
    async  doEdit() {
      const res = await updateRoule(this.rulerformData)
      console.log(res)
      if (res.code === 10000) {
        // 显示成功信息
        this.$message.success(res.message)
        // 隐藏对话框
        this.showDialog = false
        // // 编辑完成时,要让用户看到最后一页
        // this.total++
        // this.formData.page = Math.ceil((this.total) / this.formData.pagesize)
        // 重新获取角色列表
        this.loadRoule()
        // 清空表单
        this.rulerformData = {
          name: '',
          description: ''
        }
      } else {
        this.$message.error(res.message)
      }
    },
    // ---------封装添加功能,发送ajax
    async addRoule() {
      const res = await adddRoule(this.rulerformData)
      console.log(res)
      if (res.code === 10000) {
        // 显示成功信息
        this.$message.success(res.message)
        // 隐藏对话框
        this.showDialog = false
        // 新增完成时,要让用户看到最后一页
        this.total++
        this.formData.page = Math.ceil((this.total) / this.formData.pagesize)
        // 重新获取角色列表
        this.loadRoule()
        // 清空表单
        this.rulerformData = {
          name: '',
          description: ''
        }
      } else {
        this.$message.error(res.message)
      }
    },
    // ------点击删除按钮,实现删除功能
    deleteRoule(id) {
      this.$confirm('你确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delRoule(id)
        console.log(res)
        if (res.code === 10000) {
        // 显示成功信息
          this.$message.success(res.message)
          // 删除到最后一个时,页码不会自动减1,要我们去手动减1
          if (this.total % this.formData.pagesize === 1) {
            this.formData.page--
          }
          // 刷新页面
          this.loadRoule()
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        // 用户取消退出
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // ----------点击新增角色按钮
    doAdd() {
      // 显示对话框
      this.showDialog = true
      // 添加功能
      this.isEdit = false
    },
    // -------------点击取消按钮,
    hClose() {
      // 重置表单
      this.rulerformData = { // 表单数据项
        name: '',
        description: ''
      }
      this.$refs.rulerformDataRef.resetFields()
    },
    // ---------显示页码的条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    // --------用户点击的第几页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formData.page = val
      // // 重新获取所有角色列表
      this.loadRoule()
    },
    // 表格序号翻页递增
    indexMethod(index) {
      // console.log('索引数下标', index)
      const nowPage = this.formData.page
      const nowSize = this.formData.pagesize
      return index + 1 + (nowPage - 1) * nowSize
    }
  }
}
</script>
